<template>
  <i-biz-tabs :class="[ns.b()]" v-model="tab">
    <template v-for="child in modelData.deformPages" :key="child.id">
      <!-- 不显示且不用保活时直接不绘制 -->
      <view v-if="isVisible(child)">
        <i-biz-tab :class="ns.b('tab-item')" :title="child.caption" :name="child.id">
          <i-biz-form-detail-shell
            v-for="detail in child.deformDetails"
            :key="detail.id"
            :modelData="detail"
            :controller="controller"
          ></i-biz-form-detail-shell>
        </i-biz-tab>
      </view>
    </template>
  </i-biz-tabs>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
  import { PropType, ref } from "vue";
  import { FormController } from "@ibiz-template/runtime";
  import { IDEEditForm } from "@ibiz/model-core";
  import { useNamespace } from "@/use";
import iBizTab from '../../../../common/tab/i-biz-tab.vue';

  const props = defineProps({
    modelData: { type: Object as PropType<IDEEditForm>, required: true },
    controller: {
      type: Object as PropType<FormController>,
      required: true,
    },
  });
  const tab = ref<number | string>(props.modelData.deformPages?.[0].id!);
  
  const isVisible = (model: IData) => {
    const c = props.controller.details[model.id];
    return c.state.visible || c.state.keepAlive;
  };
  
  const ns = useNamespace("form-page");
</script>
<style lang="scss">
  @include b(form-tab-page) {
    width: 100%;
    height: 100%;
  }
</style>
